<template>
  <div class="category-page page-main">
    <search-form :model="searchParams" @search="search">
      <a-form-item label="文章分类：" name="prop">
        <a-select
          v-model:value="searchParams.status"
          filterable
          clearable
          @change="search(false)"
        >
          <a-select-option
            v-for="item in SHOW_OPTION"
            :key="item.value"
            :value="item.value"
          >
            {{ item.value }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="名称" name="name">
        <a-input v-model:value="searchParams.name" placeholder="请输入" />
      </a-form-item>
    </search-form>
    <div class="table-toolbar">
      <add-button @click="add()" />
    </div>
    <g-table
      ref="tableRef"
      :columns="columns"
      row-key="id"
      :api="getPageList"
      :params="searchParams"
    />

    <categoryDetail
      v-model:visible="visible"
      :data="activeRow"
      :type="searchParams.type"
      @change="search(false)"
    />
  </div>
</template>

<script setup lang="tsx">
import { categoryDel, getPageList } from "./api";
import type { Icategory } from "./entity";
import categoryDetail from "./detail.vue";
import { CATE_TYPE, SHOW_OPTION } from "@/utils/constant";
import StatusBadge from "@/components/StatusBadge.vue";
const searchParams = reactive({
  status: "",
  name: "",
  type: CATE_TYPE[2].value,
});

let visible = $ref(false);

const { tableRef, columns, search } = useTable<Icategory>([
  {
    title: "名称",
    dataIndex: "name",
    customRender: ({ record }) => record.name || record.id,
  },
  { title: "类型", dataIndex: "type" },
  { title: "分类图标", dataIndex: "extra" },
  { title: "Url", dataIndex: "url" },
  {
    title: "状态",
    dataIndex: "status",
    width: 80,
    customRender: ({ record }) => (
      <StatusBadge status={record.status ? 1 : 0} />
    ),
  },
  {
    title: "操作",
    dataIndex: "op",
    customRender: ({ record }) => (
      <>
        <table-button onClick={() => add(record)}>编辑</table-button>
        <confirm-button danger onClick={() => remove(record)}>
          删除
        </confirm-button>
      </>
    ),
  },
]);

let activeRow = $ref<Partial<Icategory>>({});
function add(row: Partial<Icategory> = {}) {
  activeRow = { ...row };
  visible = true;
}

function remove({ id }: Icategory) {
  categoryDel(id as number).then(() => {
    AntMessage.success("已删除");
    search(false);
  });
}
</script>

<style lang="scss"></style>
